<template>
  <div class="school">
    <h2>我是School组件（子组件）</h2>
    <button @click="handleSendName">点我把学校名交给App组件去展示</button>&nbsp;
    <button @click="handleSendAddress">点我把学校地址给App组件去展示</button>&nbsp;
    <button @click="handleoff">解绑getName事件</button>
    <h3>学校名称：{{name}}</h3>
    <h3>学校地址：{{address}}</h3>

  </div>
</template>

<script>
export default {
  name: 'School',
  data() {
    return {
      name: '尚硅谷',
      address: '宏福科技园',
    }
  },
  methods: {
    handleSendName() {
      this.$emit('getName', this.name) //触发School的vuecomponents
      //上的$emit方法实现getName调用
    },
    handleSendAddress() {
      this.$emit('getaddress', this.address)
    },
    handleoff() {
      // this.$off('getName')//$off传入哪个参数就是要解绑哪个事件，若不传入参数，则默认解绑所有事件。
      this.$off()
    },
  },
}
</script>
<style scoped>
.school {
  background-color: orange;
  padding: 20px;
}
</style>